<template>
  <div class="roles">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button type="primary" @click="addRoleDialogVisible=true">添加角色</el-button>
      <el-table
        :data="role_list"
        border
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row class="first_row" v-for="item in scope.row.children" :key="item.id">
              <el-col :span="5" >
                <el-tag  closable @close="delRoleRights(scope.row,item.id)" type="primary">{{item.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="19">
                <el-row v-for="subitem in item.children" :key="subitem.id">
                  <el-col :span="6">
                    <el-tag  closable @close="delRoleRights(scope.row,subitem.id)" type="success">{{subitem.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag closable @close="delRoleRights(scope.row,thirditem.id)" v-for="thirditem in subitem.children" :key="thirditem.id" type="warning">{{thirditem.authName}}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button @click="editRole(scope.row.id)" class="el-icon-edit" type="primary">编辑</el-button>
            <el-button @click="delRole(scope.row.id)" class="el-icon-s-delete" type="danger">删除</el-button>
            <el-button @click="setRights(scope.row)" class="el-icon-s-tools" type="warning">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加角色的弹窗 -->
      <el-dialog
      @close="closeAddRoleDialog"
        title="添加角色"
        :visible.sync="addRoleDialogVisible"
        width="50%">
        <div class="role_name">
          角色名称:<el-input v-model="addRoleObj.roleName" placeholder="请输入角色名称"></el-input>
        </div>
        <div class="role_desc">角色描述: <el-input v-model="addRoleObj.roleDesc" placeholder="请输入角色描述"></el-input>  </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddRole">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑角色的弹窗 -->
      <el-dialog
        title="编辑角色"
        :visible.sync="editRoleDialogVisible"
        width="50%">
        <div class="role_name">
          角色名称:<el-input v-model="editRoleObj.roleName" placeholder="请输入角色名称"></el-input>
        </div>
        <div class="role_desc">角色描述: <el-input v-model="editRoleObj.roleDesc" placeholder="请输入角色描述"></el-input>  </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEditRole">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分配权限的弹窗 -->
      <el-dialog
        title="分配角色权限"
        @close="closeSetRoleRights"
        :visible.sync="setRightsDialogVisible"
        width="50%">
        <el-tree
          ref="treeRef"
          :data="rights_tree"
          :props="rights_tree_props"
          show-checkbox
          default-expand-all
          node-key="id"
          :default-checked-keys="default_rights_keys"
        >
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setRightsDialogVisible = false">取 消</el-button>
          <el-button @click="confirmSetRolesRights" type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      role_list:[],
      setRightsDialogVisible:false,
      rights_tree:[],
      rights_tree_props:{
        children: 'children',
        label: 'authName'
      },
      default_rights_keys:[],
      roleID:'',//当前分配权限的角色ID
      addRoleDialogVisible:false,
      editRoleDialogVisible:false,
      addRoleObj:{
        roleName:'',
        roleDesc:''
      },
      editRoleObj:{
        id:'',
        roleName:'',
        roleDesc:''
      }
    }
  },
  created(){
    this.getRolesList()
  },
  methods:{
    //获取角色列表
    async getRolesList(){
      const res=await this.$http.get('roles')
      // console.log(res);
      if(res.data.meta.status!==200) return this.$message.error('获取数据失败')
      this.role_list=res.data.data
    },
    //删除角色权限
    async delRoleRights(row,rightID){
      // console.log(roleID);
      // console.log(rightID);
      const flag = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
          return err
        })
      if(flag==='confirm'){
        const res=await this.$http.delete(`roles/${row.id}/rights/${rightID}`)
        console.log(res);
        if(res.data.meta.status!==200) return this.$message.error('删除权限失败')

        row.children=res.data.data
        this.$message.success(res.data.meta.msg)
      }      
    },
    //点击分配权限按钮
    async setRights(row){
      this.roleID=row.id
      // console.log(row);
      const res=await this.$http.get('rights/tree')
      // console.log(res);
      if(res.data.meta.status!==200) return this.$message.error('获取权限列表失败')
      this.rights_tree=res.data.data
      // console.log(this.rights_tree);
      this.getThirdNodeKeys(row)
      // console.log(this.default_rights_keys);
      this.setRightsDialogVisible=true
    },
    //通过递归的方式获取最低层级的节点ID
    getThirdNodeKeys(row){
      if(!row.children) return this.default_rights_keys.push(row.id)
      row.children.forEach(item=>{
          this.getThirdNodeKeys(item)
      })
    },
    //确认修改分配权限
    async confirmSetRolesRights(){
      const keys=[
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      console.log(keys);
       const res= await this.$http.post(`roles/${this.roleID}/rights`,{rids:keys.join(',')})
       console.log(res);
       console.log(this.roleID);
       if(res.data.meta.status!==200) return this.$message.error('更新失败')
       this.$message.success('更新成功')
       this.getRolesList()
       this.setRightsDialogVisible=false
    },
    closeSetRoleRights(){
      this.default_rights_keys=[]
    },
    closeAddRoleDialog(){
      this.addRoleObj.roleName=''
      this.addRoleObj.roleDesc=''
    },
    async confirmAddRole(){
      const res=await this.$http.post('roles',this.addRoleObj)
      console.log(res);
      if(res.data.meta.status!==201) return this.$message.error(res.data.meta.msg)
      this.getRolesList()
      this.addRoleDialogVisible=false
      this.$message.success(res.data.meta.msg)
    },
    //点击编辑权限
    async editRole(roleID){
      const res= await this.$http.get('roles/'+roleID)
      console.log(res);
      if(res.data.meta.status!==200) return this.$message.error('获取角色信息失败')
      this.editRoleObj.roleName=res.data.data.roleName
      this.editRoleObj.roleDesc=res.data.data.roleDesc
      this.editRoleObj.id=roleID
      this.editRoleDialogVisible=true
    },
    async confirmEditRole(){
      const res=await this.$http.put('roles/'+this.editRoleObj.id,this.editRoleObj)
      console.log(res);
      if(res.data.meta.status!==200) return this.$message.error(res.data.meta.msg)
      this.getRolesList()
      this.editRoleDialogVisible=false
      this.$message.success('更新成功')
    },
    async delRole(id){
      const flag=await this.$confirm('是否确定删除角色','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).catch(err=>{
        return err
      })
      if(flag==="confirm"){
        const res=await this.$http.delete('roles/'+id)
        console.log(res);
        if(res.data.meta.status!==200) return this.$message.error('删除失败')
        this.getRolesList()
        this.$message.success('删除成功')
      }

    }
  }
}
</script>

<style lang="less" scoped>
.roles{
  .el-dialog{
    .role_name,.role_desc{
      display: flex;
      align-items: center;
      .el-input{
        flex: 1;
        margin: 20px;
      }
    }
  }
  .el-breadcrumb{
    font-size: 16px;
  }
  .el-card{
    margin-top: 20px;
    .el-table{
      margin-top: 20px;
      .first_row{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
      }
      // .el-table-column>el-row>el-col:first-child{
      //   display: flex;
      //   align-items: center;
      // }
      .el-tag{
        margin: 10px;
      }
    }
    .el-tree{
      height: 500px;
      overflow-y: scroll;
    }
  }
}
</style>